<template>
  <!-- userDetail.customerId新建过客户 -->
  <div style="height:100%" v-loading="loadPage">
    <template v-if="!loadPage">
      <div class="base-info" v-if="userDetail.customerId">
        <div class="wrap-container">
          <div class="wrap">
            <p class="left">{{$t('common.fields.customerName.displayName')}}</p>
            <p class="right">
              {{ userDetail.customerName}}
              <span
                v-if="userDetail.customerName && source == 'weChat'"
                style="
            font-size: 10px;
            font-weight: 400;
            margin-left: 4px;
            color: #20cc62;
          "
            class="conversationNumber iconfont icon-weixin5"
          ></span
          >
        </p>
      </div>
      <div class="wrap" v-if="userDetail.customerTagNames && userDetail.customerTagNames.length">
        <span class="chat-state-block" v-for="(item, i) in userDetail.customerTagNames" :key="i">
          {{ item }}
        </span>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.customerNo.displayName')}}</p>
        <p
          class="right conversationNumber"
          style="cursor: pointer"
          @click="goImDetail(userDetail.customerId)"
        >
          {{ userDetail.customerNum }}
        </p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.contact.displayName')}}</p>
        <p class="right">{{ userDetail.linkmanName }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('customerContact.linkmanRemark')}}</p>
        <p class="right">{{ userDetail.linkmanRemark }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.phone.displayName')}}</p>
        <p class="right">{{ userDetail.linkmanPhone }}<biz-call-icon class="mar-l-8" v-if="userDetail.linkmanPhone" :value="userDetail.linkmanPhone" :sourceData="callCenterSourceData" /></p>
      </div>
      <!-- 纯客服云版本不显示邮箱 -->
      <div class="wrap">
        <p class="left">{{$t('common.fields.email.displayName')}}</p>
        <p class="right">{{ userDetail.linkmanEmail }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.address.displayName')}}</p>
        <p class="right">{{ userDetail.customerAddress }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.label.customerManager')}}</p>
        <p class="right">
          <span class="user-card-triggle" v-user="userDetail.serviceManageId">
            <template v-if="isOpenData && userDetail.serviceManageStaffId">
              <open-data
                type="userName"
                :openid="userDetail.serviceManageStaffId"
              ></open-data>
            </template>
            <template v-else>
              {{ userDetail.serviceManage }}
            </template>
          </span>
        </p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.executorDepartment.displayName')}}</p>
        <p class="right">{{ userDetail.tags | fmt_tag }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.createUser.displayName')}}</p>
        <p class="right">
          <span class="user-card-triggle" v-user="userDetail.createUserId">
            <template v-if="isOpenData">
              <open-data
                type="userName"
                :openid="userDetail.createUserStaffId"
              ></open-data>
            </template>
            <template v-else>
              {{ userDetail.createUser }}
            </template>
          </span>
        </p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.createTime.displayName')}}</p>
        <p class="right">{{ userDetail.createTime | formatDate }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.imLastFollowTime.displayName')}}</p>
        <p class="right">{{ userDetail.updateTime | formatDate }}</p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.eventContact.displayName')}}</p>
        <p class="right">
          <span
            class="OpenLink"
            @click="OpenEvent(item)"
            v-for="item in userDetail.bizRelInfo"
            :key="item.id"
          >{{ item.bizNo }}</span
          >
        </p>
      </div>
      <div class="wrap">
        <p class="left">{{$t('common.fields.relationProduct.displayName')}}</p>
        <p class="right">
          <span
            class="OpenLink"
            @click="toProductDetail(item.bizId)"
            v-for="item in userDetail.bizRelProductInfo"
            :key="item.id"
          >{{ item.bizNo }}</span
          >
        </p>
      </div>

      <!-- start 关联工单 -->
      <div class="wrap" v-if="_isShowTaskModule">
        <p class="left">{{$t('common.fields.relationTask.displayName')}}</p>
        <p class="right">
          <span
            class="OpenLink"
            @click="goTaskDetail(item.bizId, item.bizNo)"
            v-for="item in userDetail.bizRelTaskInfo"
            :key="item.id"
          >{{ item.bizNo }}</span
          >
        </p>
      </div>
      <!-- end 关联工单 -->

    </div>
    <template v-if="(linkmanName !== '未知联系人' || !!linkmanName)&&!isTourist">
      <div class="btn-wrap">
        <!-- 新建工单，事件，pass按钮 -->
        <NewConstructionByIM :user-detail="userDetail" />
        <!-- 关联事件 -->
        <AssociatedEvents
          style="margin-left:12px"
          ref="AssociatedEvents"
          @saveBizRel="$emit('saveBizRel')"
          :conversation-id="hxIdObj.conversationId"
          :biz-rel-infos="userDetail.bizRelInfo"
          :cus-id="userDetail.customerId"
        />
      </div>
    </template>
  </div>
  <div v-else class="default">
    <div class="default-img">
      <img :src="noDataImage" alt="" />
    </div>
    <div class="default-msg">{{$t('common.base.tip.noData')}}</div>
    <div class="btn-wrap" v-if="!isTourist">
      <el-button
        v-if="allowCreateCustomer"
        type="primary"
        icon="el-icon-plus"
        style="border-radius: 4px;"
        @click="toCreateCustomer(hxIdObj.conversationId, userDetail.linkmanPhone,userDetail.linkmanEmail)"
      >{{$t('common.fields.customer.displayName')}}</el-button
      >
      <el-button
        v-if="allowCreateLinkman"
        type="primary"
        icon="el-icon-plus"
        style="border-radius: 4px;"
        @click="toSaveLinkman(userDetail.linkmanPhone,userDetail.linkmanEmail)"
      >{{$t('common.fields.contact.displayName')}}</el-button
      >
      <!-- +联系人弹出 -->
      <el-dialog
        :title="$t('im.imChat.components.chatDetail.title1')"
        :visible.sync="saveDialogVisible"
        width="420px"
        @close="saveDialogClosed"
      >
        <!-- 内容主体区域 -->
        <el-form
          :model="saveForm"
          :rules="saveFormRules"
          ref="saveFormRef"

          label-position="top"
        >
          <el-form-item :label="$t('common.fields.customer.displayName')" prop="customer">
            <customer-select
              style="line-height: initial;"
              v-model="customer"
              :field="customerField"
              :remote-method="searchCustomer"
              :update-customer="updateCustomer"
              :placeholder="$t('common.placeholder.selectSomething', {0:$t('common.fields.customer.displayName')})"
            ></customer-select>
          </el-form-item>

          <el-form-item :label="$t('im.detail.label1')" prop="type">
            <el-radio v-model="saveForm.type" :label="0">{{$t('im.detail.label2')}}</el-radio>
            <el-radio v-model="saveForm.type" :label="1">{{$t('im.detail.label3')}}</el-radio>
          </el-form-item>

          <template>
            <el-form-item v-if="saveForm.type==0" :label="$t('common.fields.contact.displayName')" prop="name">
              <el-input
                v-model="saveForm.name"
                :placeholder="$t('common.placeholder.inputSomething', {data1:$t('common.fields.contact.displayName')})"
              ></el-input>
            </el-form-item>

            <el-form-item v-if="saveForm.type==1" :label="$t('common.fields.contact.displayName')" prop="linkman">
              <biz-remote-select
                ref="linkman"
                :placeholder="$t('im.detail.pla2')"
                :cleared="true"
                v-model="saveForm.linkman"
                :remote-method="searchLinkman"
              >
              </biz-remote-select>
            </el-form-item>
          </template>

          <template>
            <!-- 纯客服云版本不显示邮箱 -->
            <el-form-item v-if="saveForm.email" :label="$t('common.fields.email.displayName')" prop="email">
              <!-- weChat可修改 -->
              <el-input
                v-model="saveForm.email"
                :disabled="source !== 'weChat'"
              ></el-input>
            </el-form-item>
            <el-form-item v-else :label="$t('common.fields.contactNumber.displayName')" prop="phone">
              <!-- weChat可修改 -->
              <el-input
                v-model="saveForm.phone"
                :disabled="source !== 'weChat'"
              ></el-input>
            </el-form-item>
          </template>

        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="saveDialogVisible = false">{{$t('common.base.cancel')}}</el-button>
          <el-button type="primary" @click="submit" :loading="loading">{{$t('common.base.confirm')}}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  </template>
  </div>
</template>

<script>
import { isOnlyCustomerServiceCloudVersion } from '@src/util/version.ts';
import { formatDate } from 'pub-bbx-utils';
import ChatMixin from '../../../ChatMixin';
import AssociatedEvents from './AssociatedEvents';
import NewConstructionByIM from '@src/modules/im/components/NewConstructionByIM.vue'
import { isOpenData, openAccurateTab } from '@src/util/platform';
import EventBus from '@src/util/eventBus';
import { mapState } from 'vuex'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
/* version control mixin */
import { VersionControlTaskMixin, VersionControlOtherMixin } from '@src/mixins/versionControlMixin'

export default {
  name: 'base-info',
  mixins: [
    ChatMixin,
    VersionControlTaskMixin,
    VersionControlOtherMixin
  ],
  components: {
    AssociatedEvents,
    NewConstructionByIM
  },
  props: {
    userDetail: {
      type: Object,
      default: () => ({}),
    },
    hxIdObj: {
      type: Object,
      default: () => ({}),
    },
    source: {
      type: String,
      default: '',
    },
    currentConversationInfo:{
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      noDataImage,
      isOpenData,
      loading:false,
      buttonList: [{name: '工单', appId: -1}, {name: '事件', appId: -2}]
    };
  },
  filters: {
    formatDate(value) {
      return formatDate(value, 'YYYY-MM-DD HH:mm:ss');
    },
    fmt_tag(value) {
      if (!Array.isArray(value) || !value || !value.length) return '';
      return value.map(t => t.tagName).join('， ');
    },
  },
  computed: {
    ...mapState(['operationalData']),
    linkmanName() {
      return (this.userDetail && this.userDetail.linkmanName) || '';
    },
    isTourist() {
      return this.userDetail?.registerType === 4;
    },
    loadPage(){
      return JSON.stringify(this.userDetail) == '{}'
    },
    // 呼叫中心来源数据
    callCenterSourceData(){
      return {
        sourceTypeId:this.currentConversationInfo.id,
        sourceType:'IM',
        sourceTypeNo:this.currentConversationInfo.conversationNumber
      }
    },

  },
  mounted(){
    if(this.hxIdObj.conversationId){
      EventBus.$emit('getCustomerInfo', this.hxIdObj.conversationId)
    }
  },

  methods: {
    toCreateCustomer(...rest) {
      this.createCustomer(...rest)
      this.$track.clickStat(this.$track.formatParams('CHAT_TO_CREATE_CUSTOMER'))
    },
    toSaveLinkman(...rest) {
      this.saveLinkman(...rest)
      this.$track.clickStat(this.$track.formatParams('CHAT_TO_CREATE_CONTRACT'))
    },
    OpenEvent(item) {
      // this.$platform.openTab({
      //   id: `event_view_${item.bizId}`,
      //   title: `事件${item.bizNo}`,
      //   close: true,
      //   url: `/event/view/${item.bizId}`,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageEventView,
        key: item.bizId,
        titleKey: item.bizNo
      })
    },
    goImDetail(customerId) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `customer_view_${customerId}`,
      //   title: '客户详情',
      //   close: true,
      //   url: `/customer/view/${customerId}?noHistory=1`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCustomerView,
        key: customerId,
        params: 'noHistory=1',
        fromId
      })
    },
    // 跳转到产品详情
    toProductDetail(productId){
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `product_view_${productId}`,
      //   title: '产品详情',
      //   close: true,
      //   url: `/customer/product/view/${productId}?noHistory=1`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductView,
        key: productId,
        params: 'noHistory=1',
        fromId
      })
    },
    // 跳转到工单详情
    goTaskDetail(id, taskNo){
      let fromId = window.frameElement.getAttribute('id')
      // this.$platform.openTab({
      //   id: `task_view_${id}`,
      //   title: `工单${taskNo}`,
      //   close: true,
      //   url: `/task/view/${id}`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: id,
        titleKey: taskNo,
        fromId
      })
    },
    async submit(){
      this.loading = true
      try{
        await this.saveUser(this.hxIdObj.conversationId)
        EventBus.$emit('refreshCustomerInfo')
      }catch(err){
        console.log(err)
      }finally{
        this.loading = false
      }
    },

  },

};
</script>

<style lang="scss" scoped>
.base-info {
  font-size: 14px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .wrap-container {
    flex: 1;
    overflow-y: auto;
    .wrap {
      display: flex;
      .left {
        display: inline-block;
        color: #595959;
        width: 100px;
      }
      .right {
        color: #262626;
        display: inline-block;
        width: 150px;
      }
      .conversationNumber {
        color: $color-primary-light-6;
      }

      .chat-state-block {
        display: inline-block;
        width: auto;
        height: 22px;
        border-radius: 11px;
        margin-right: 8px;
        margin-bottom: 12px;
        text-align: center;
        line-height: 22px;
        padding: 0 8px;
        background-color: $color-primary;
        color: #fff;
      }
    }
  }
  .btn-wrap {
    border-top: 1px solid #e8e8e8;
    box-sizing: border-box;
    padding: 10px 0;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    line-height: 32px;
  }
}
.default {
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  padding-top: 80px;
  position: relative;
  .default-img {
    // margin-top: 80px;
    img {
      width: 160px;
      height: 160px;
    }
  }
  .default-msg {
    margin-top: 8px;
    color: $text-color-regular;
  }
  .btn-wrap {
    border-top: 1px solid #e8e8e8;
    position: absolute;
    box-sizing: border-box;
    padding: 10px 0;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    line-height: 32px;
    text-align: left;
  }
}
.OpenLink {
  color: $color-primary-light-6;
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}
.OpenLink:hover {
  text-decoration: underline;
}
::v-deep .el-dialog__headerbtn{
  top: 8px;
}
</style>
